對於程式碼的風格，不管是初學者或是有經驗的開發者，當一個專案執行時，
在規劃程式碼的寫法，若沒有考慮到程式碼的可讀性和可維護性，在若干天後或是當別人接手程式時，需要增加新功能或是重構程式碼時，因為可讀性太差，或程式碼出現跟命名不預期的行為，甚至是耦合度太高，造成改不動，
這些都是撰寫程式碼常見的錯誤，以下提供了幾種撰寫 react 程式碼常見的錯誤範例，提供大家參考：

命名上

const aaa = 123

// 在維續時根本不知道 aaa 是什麼

const doJob = ()=>{
.........
}

// 當 do 的 function 一多，根本不知道 doJob 指的是什麼功能

//JSX tag

<customerButton></customerButton>

// component 沒有使用 Pascal Case

過多的 if else

// 譬如以下是個數字相加的處理 function

// extra 不是要必要傳入的參數

const sumFunction = (a,b,extra)=>{
  if(typeof extra === 'undefine'){
      return a+b
    }
  else{
        return a+b+extra
    }
}

這邊利用了 if else 其實是多餘的寫法，
可以利用其他方法達成我們要的效果

solid (單一職責原則)

import React, {useEffect, useReducer, useState} from "react";

const initialState = {
    isLoading: true
};

// COMPLEX STATE MANAGEMENT
function reducer(state, action) {
    switch (action.type) {
        case 'LOADING':
            return {isLoading: true};
        case 'FINISHED':
            return {isLoading: false};
        default:
            return state;
    }
}

export const Users = () => {

    const [users, setUsers] = useState([])
    const [filteredUsers, setFilteredUsers] = useState([])
    const [state, dispatch] = useReducer(reducer, initialState);

    const showDetails = (userId) => {
        const user = filteredUsers.find(user => user.id === userId);
    }

    // REMOTE DATA FETCHING
    useEffect(() => {
        dispatch({type:'LOADING'})
        fetch('https://randomuser.me/api/')
            .then(response => response.json())
            .then(data => {
                dispatch({type:'FINISHED'})
                setUsers(data?.results)
            })
    },[])

    // PROCESSING DATA
    useEffect(() => {
        const filteredUsers = users.map(user => {
            return {
                id: user?.id.value,
                name: user.name,
                contact: `${user.phone} , ${user.email}`
            };
        });
        setFilteredUsers(filteredUsers)
    },[users])

    // COMPLEX UI RENDERING
    return <>
        <div> Users List</div>
        <div> Loading state: {state.isLoading? 'Loading': 'Success'}</div>
        {users.map(user => {
				return <div key={user?.id.value} onClick={() => showDetails(user.id)}>
                <div>{user.name}</div>
                <div>{user.email}</div>
            </div>
        })}
    </>
}

//像是上面的程式碼，分為四個程式碼階段，
1. fetch 資料
2. filter 資料
3. 複雜狀態管理
4. 複雜的 UI 介面
但是全部的事情都混在一個 component，其實是可以利用 hook 做功能性拆分的

之後我們會針對以上的程式碼範例，來提供具體的寫法建議，
請讀者看下去。

https://blog.pragmaticengineer.com/readable-code/https://www.geeksforgeeks.org/how-to-use-single-responsibility-principle-in-reactjs/https://hackernoon.com/understanding-solid-principles-in-javascript-w1cx3yrvhttps://dev.to/sylwiavargas/5-ways-to-refactor-if-else-statements-in-js-functions-208e